import React from "react";
import styles from '@/assets/css/detail.module.css';
import { TMap } from '@map-component/react-tmap';
import type room from "@/typeof/room";
import type comment from "@/typeof/comment";
import type business from "@/typeof/type";

const Info = () =>
{
    const [info,SetInfo] = useState<room>({} as room);
    const [CommentList,SetCommentList] = useState<comment[]>([]);
    const [searchParams] = useSearchParams();
    const [roomid] = useState<string>(searchParams.get('roomid') ?? '');
    const [business] = useState<business>(React.business);

    useEffect(() => {
        GetInfoData();
    },[roomid]);

    const GetInfoData = async () =>
    {
        const params = {
            roomid
        }

        const result = await React.Http.post('/room/info',params);

        if(result.code === 1)
        {
            SetInfo(result.data.room);
            SetCommentList(result.data.CommentList);
        }else{
            React.fail(result.msg,() => {
                React.navigate(-1);
            });
        }
    }

    const OnConfirm = () =>
    {
        if(Object.getOwnPropertyNames(business).length === 0)
        {
            React.UI.Dialog.confirm({
                title:'登录',
                content:'是否跳转登录界面？',
                onConfirm:() =>
                {
                    React.navigate('/business/login');
                }
            })

            return false;
        }

        React.navigate(`/room/confirm?roomid=${roomid}`);
    }

    const ConfirmBtn = () =>
    {
        if(info.status === true)
        {
            return (
                <React.UI.Button color='primary' shape='rounded'>已预定</React.UI.Button>
            )
        }else{
            return (
                <React.UI.Button onClick={OnConfirm} color='primary' shape='rounded'>立即预定</React.UI.Button>
            )
        }
    }

    return (
        <>
            <React.UI.Image src={info.thumb_text} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{info.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {info.flag && info.flag_text.map((val:string,index:number) =>
                            {
                                return (
                                    <span key={index}>{val}</span>
                                )
                            })}
                        </div>
                    </div>
                    <div className={styles.title}>{info.content}</div>
                </div>
                {/* 预定需知 */}
                <div className={styles.notesin}>
                    <div className={styles.title}>预订须知</div>
                    <div className={styles.item}>
                        <span className={styles.tips}>预订房型：</span>
                        <span>新房特惠</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>剩余房间数量：</span>
                        <span>{info.total}</span>
                    </div>
                </div>

                {/* 地图 */}
                <div className={styles.notesin}>
                    <TMap
                        mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                        center={{ lat: 39.984104, lng: 116.307503 }}
                        version='1.exp'
                    />
                </div>

                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        {CommentList.map((item:comment) => (
                            <div className={styles.rate_list_item} key={item.id}>
                                <div className={styles.item_content}>
                                    <div className={styles.content_prefix}>
                                        <div className={styles.ratelist}>
                                            <div className={styles.image}>
                                                <img src={'/assets/images/avatar.png'} alt="" />
                                            </div>
                                            <p className={styles.nickname}>{item.business.nickname}</p>
                                        </div>
                                    </div>
                                    <div className={styles.content_main}>
                                        <div className={styles.rate}>
                                            <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                        </div>
                                        <div className={styles.item_description}>
                                            <p>{item.content}</p>
                                            <p className={styles.item_time}>{item.createtime_text}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </React.UI.List>

                    <React.UI.AutoCenter>
                        <NavLink to={`/room/HotelRate?roomid=${roomid}`}>查看更多评价</NavLink>
                    </React.UI.AutoCenter>
                </div>
            </div>

            <div className={styles.foot_bar}>
                <div className={styles.price}>
                    ￥{info.price}
                </div>
                <ConfirmBtn />
            </div>
        </>
    );
}

export default Info;